<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
		#div_img{margin:0 auto;text-align:center;
				width:500px;
				height:602px;
				overflow:hidden;
				}
	</style>
</head>
<body>
	<div id="div_img" style="height:602px;">
		<img width="200" src="suolon.jpg" alt="索隆" />
	</div>
	<p align="center">
	<input type="button" id="open" value="打开" />
	<input type="button" id="close" value="关闭" />
	</p>
	<script type="text/javascript">
		var div_img = document.getElementById('div_img');
		var open    = document.getElementById('open');
		var close   = document.getElementById('close');
		
	
		var s = 0;
		var c = 1;
		open.onclick=function(){
						//div_img.style.height="602px";
						if(s == 1){
							return false;
						}
						s++;
						
						test2();
					
					}

					function test2(){
							var h = parseFloat(div_img.style.height);
							if(h<602){
								close.disabled = true;
								div_img.style.height = c+"px";
								c++;
								setTimeout("test2()",20);
							}else{
								c = 1;
								s = 0;
								close.disabled = false;
							}
					}





		var i =0;
		close.onclick=function(){
						
						if(i == 1){
							return false;
						}

						i++;


						var b= parseFloat(div_img.style.height);
						b++;
						test(b);
					}


					function test(b){

						if(b >=0){
							open.disabled = true;
							div_img.style.height = b+"px";
							b--;
							setTimeout("test("+b+")",20);
						}else{
							open.disabled = false;
							i = 0;
						}

					}
		
	</script>
</body>
</html>